Hexo搭建blog使用Next主题 配置以及美化方法（必看必学）

发表于 | 更新于:   |   字数统计: 5,691(字)   |   阅读时长≈ 26(分) | 分类于 | | 阅读次数:
NexT主题的个性化配置。不建议大家直接复制他人的源码，还是按照自己的想法来配置比较好。开始做之前先多看看，一旦开始动手的话也就一天时间就能得到自己的个性化的博客！

Next主题优化 个性化打造

Hexo使用next主题的各种优化（必看）
Hexo使用next主题的各种优化（必看）
Hexo 是高效的静态站点生成框架，她基于 Node.js。 通过 Hexo 你可以轻松地使用Markdown 编写文章。在这篇文章中，假定你已经成功安装了 Hexo，并使用 Hexo 提供的命令创建了一个站点。

>这里说明白了就是hexo的这个框架啊，基于Node.js，hexo用来生成html（从markdown到html的旅程
），比较高效。
>而github pages支持静态页面的解析，完全可以自己写 html push 到 gitpages
>更多的参考 hexo是怎么工作的http://coderunthings.com/2017/08/20/howhexoworks/


( 关于如何初步使用Hexo以及Github来搭建博客请参考我博客中的其他文章或者网上自行搜索） )

而NexT是hexo中经常使用到的一个主题，可能是因为它漂亮hhh其实是因为这个主题封装的插件比较好和全，大部分只要往里头写就行了。其他的主题可以在github上搜索，前三名是Next，Casper，uno～有哪些好看的 Hexo 主题？

网上能搜索出很多的教程，我就不一一记录了，Next主题优点scheme（主题）、Plug-in（插件）都有。
其实我们搭建自己个人的blog，更直观的就是一个主题的使用感受。网上还有很多把自己的搭建的站点配置文件和
主题配置文件源码分享的。

注意站点配置文件和主题配置文件
在 Hexo 中有两份主要的配置文件，其名称都是_config.yml。 其中，一份位于站点根目录下，主要包含 Hexo 本身的配置；另一份位于主题目录下，这份配置由主题作者提供，主要用于配置主题相关的选项。
拿我自己来举例子，
站点配置文件的路径是/shirlynn/blog/_config.yml，
主题配置文件的路径是/shirlynn/blog/themes/next/_config.yml

shirlynn/blog是我的站点根目录，当初下载hexo时必须安装在用户目录下。 不同的主题配置文件不同，比如landscape主题的主题配置文件的路径是/shirlynn/blog/themes/landscape/_config.yml

不建议大家直接复制他人的源码，还是按照自己的想法来配置比较好。开始做之前先多看看，一旦开始动手的话也就是一天的时间就能得到自己的个性化的博客！

第一步 官方手册

我当初是按照官方手册Next官方手册来的，都比较简单明了。
一些比较基本的，比如字体等，都已经包含在其中。
当然不必要每一步都和官方一样，但是为了之后自己的定制个人化打下基础，再后来的配置中知道自己正在做什么就行了。

第二步 next主题的各种优化（必看）

可以在侧边栏快速找到你想要的个性化设置
  1. 修改文章字体的大小
  2. 博客首页文章摘要显示图片
  3. 增加站内搜索
  4. 增加底部版权声明
  5. 添加字数统计与阅读时长
  6. 添加来必力评论系统
  7. 修改头像实现旋转
  8. 添加访问量
  9. 添加进度条
  10. 侧边栏社交小图标设置
  11. 添加Rss
  12. 修改文章内链接文本样式
  13. 修改文章底部的那个带#号的标签
  14. 在每篇文章末尾统一添加“本文结束”标记
  15. 添加底部分享
  16. 修改代码块自定义样式
  17. 添加友情链接
  18. 博客添加背景动态效果和心心
  19. hexo文章目录显示的bug
  20. 更换Scheme
  21. 优化加载速度
  22. 博文置顶
  23. 博客置顶功能

1. 修改文章字体的大小

打开Next主题的配置文件_config.yml，将global属性的size设置为16。更为详细的设置可以参考：Next官方手册

1
2
3
4
5
# Global font settings used on <body> element.
global:
external: true
family: Lato
size: 16

2. 博客首页文章摘要显示图片

给文章的Front-matter添加photos字段。例如：

1
2
3
4
5
6
7
title:  
date: 2019-06-25 14:08:12
tags: 测试
categories: 
updated:
photos: 'http://cn.naturewallpaperfree.com/tiankong-shui-bolang/ziran-bizhi-1280x800-4202-fa8bea7b.jpg'
copyright: true

添加了photos字段后，在博客首页就会显示对应的图片。每个标签的含义可以参考：Hexo官方文档

3. 增加站内搜索

Hexo提供的Local Search,原理是通过hexo-generator-search插件在本地生成一个search.xml文件，搜索的时候，从这个文件中根据关键字检索出相应的链接。

安装hexo-generator-search插件

1
2
3
4
$ npm install hexo-generator-search --save
安装hexo-generator-searchdb插件

$ npm install hexo-generator-searchdb --save

启动搜索：编辑站点配置文件~/blog/_config.yml，增加以下内容到任意位置：

1
2
3
4
5
6
# Add search function
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

4. 增加底部版权声明

在主题目录next/layout/_macro/下添加文件my-copyright.swig

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>
</div>
<script>
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({
          title: "",
          text: '复制成功',
          html: false,
          timer: 500,
          showConfirmButton: false
        });
      });
    }));
</script>
{% endif %}

在目录next/source/css/_common/components/post/下添加文件my-post-copyright.styl：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig,在代码

1
2
3
4
5
{% if theme.wechat_subscriber.enabled and not is_index %}
  <div>
    {% include 'wechat-subscriber.swig' %}
  </div>
{% endif %}

之前添加代码

1
2
3
4
5
<div>
    {% if not is_index %}
      {% include 'my-copyright.swig' %}
    {% endif %}
  </div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

然后保存。

如果需要为文章添加版权信息，只需要在当前博客或者模板文件的Front-matter中添加字段：copyright: true

1
2
3
4
5
6
7
8
---
title: 
tags: 
categories: 
date: 2019-05-24 15:06:10
updated:
copyright: true
---

5. 添加字数统计与阅读时长

NexT主题默认已经集成了字数统计的功能，只需要在主题的配置文件中打开此功能即可。

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: true
  separated_meta: true

修改完成之后，重新启动服务，进行预览

1
hexo s --drafts

访问http://localhost:4000/ 链接，如果出现字数统计和阅读时长失效的情况，一般是因为没有安装 hexo-wordcount插件，查看 Hexo 插件：

1
hexo --debug

安装字数统计的插件
如果没有安装 hexo-wordcount 插件，先安装该插件：

1
npm i --save hexo-wordcount

Node 版本 7.6.0 之前,请安装 2.x 版本 (Node.js v7.6.0 and previous) ，安装命令如下：

1
npm install hexo-wordcount@2 --save

安装完成后，重新执行启动服务预览就可以了。

6. 添加来必力评论系统

首先要注册来必力帐号，并获取用户的UID（具体可以看上方的参考博客）。
然后打开主题目录的配置文件/next/_config.yml，定位到livere_uid字段，将UID填入即可

1
2
3
4
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
#livere_uid: your uid
livere_uid: MTAyMC8zMjk1NS85NTs3

至此，其他人就可以使用评论系统进行评论。

  1. 修改头像实现旋转
    更换头像，打开站点配置文件,找到avatar字段，可以使用网络路径，也可以将头像存放在source/images/中。如果头像是椭圆的，是因为图片不是一个正方形的图片，找到一个宽高像素一样的的图片即可。
1
avatar: /images/head.jpg

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;
  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}
img:hover {
  /* 鼠标经过停止头像旋转
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

8. 添加访问量

打开\themes\next\layout\_partials\footer.swig文件,搜索<div class="copyright">，在这个div标签前边加上如下代码

1
<script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后再在合适的位置添加如下代码，自己是放在footer.swig文件的末尾，具体显示的位置见博主的博客。

1
2
3
4
5
<div class="powered-by">
<i class="fa fa-user-md"></i><span id="busuanzi_container_site_uv">
  本站访客数:<span id="busuanzi_value_site_uv"></span>
</span>
</div>

注意：统计访问量有两种不同的方式（自己使用的是uv的方式）

pv的方式，也就是单个用户连续点击n篇文章，记录n次访问量

1
2
3
<span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>

uv的方式，单个用户点击n篇文章，只记录1次访问量

1
2
3
<span id="busuanzi_container_site_uv">
  本站总访问量<span id="busuanzi_value_site_uv"></span>次
</span>

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

==2019.3.31 修复不蒜子域名失效==
==新方法==
使用不蒜子添加总访问量

不蒜子官网：http://busuanzi.ibruce.info/
使用功能就更加简单，找到 next 主题的页脚文件 foot.swg:

1
vim themes/next/layout/_partials/footer.swig

添加如下代码即可:

1
2
3
4
5
6
7
8
<span id="busuanzi_container_site_pv" class="theme-info">
&nbsp;&nbsp;|&nbsp;&nbsp;本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
  <span id="busuanzi_container_site_uv" class="theme-info">
&nbsp;&nbsp;|&nbsp;&nbsp;本站访客数<span id="busuanzi_value_site_uv"></span>人次
  </span>

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

9. 添加进度条

首先需要查看当前NexT的版本号？
如何查看当前NexT主题的版本号呢，打开主题配置文件_config.yml,最下方就显示了当前的版本号。

版本5.1.3只需要在主题配置文件中找到pace属性，将其修改为true就可以了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: true
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-minimal

10. 侧边栏社交小图标设置

打开主题配置文件，搜索social_icons,在图标库fontawesome找自己喜欢的小图标，并将名字复制到social_icons属性下，保存即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
social:
  GitHub: https://github.com/bailangsyc
  CSDN: http://blog.csdn.net/bailangsyc?ref=toolbar
  简书: https://www.jianshu.com/u/05c8535250b5
  音乐: http://music.163.com/#/user/home?id=328756156
  #E-Mail: mailto:yourname@gmail.com || envelope
  #Google: https://plus.google.com/yourname || google


social_icons:
  enable: true
  icons_only: false
  transition: false
  GitHub: github
  csdn: crosshairs
  简书: heartbeat
  音乐: fa-music

11. 添加Rss

使用cd进入博客的根目录，执行下方命令安装插件hexo-generate-feed

1
$ npm install --save hexo-generator-feed

找到博客的配置文件_config.yml,然后在文件末尾添加

1
2
3
# Extensions
## Plugins: http://hexo.io/plugins/
plugins: hexo-generate-feed

然后找到主题的配置文件_config.yml,在rss:的后面加上/atom.xml,注意在冒号后面要加一个空格)

1
2
3
4
# Set rss to false to disable feed link.
# Leave rss as empty to use site's feed link.
# Set rss to specific value if you have burned your feed already.
rss: /atom.xml

在博客根目录执行命令hexo g

12. 修改文章内链接文本样式

见本博客文章中的效果：当点击蓝色链接时，颜色变为黄色

修改文件 themes\next\source\css_common\components\post\post.styl，在末尾添加如下css样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 文章内链接文本样式
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

@import "post-expand";
@import "post-collapse";

13. 修改文章底部的那个带#号的标签

默认的标签文字前边是个#，可以将其修改

修改模板/themes/next/layout/_macro/post.swig，搜索rel=”tag”>#，将 # 换成

1
2
3
4
5
<div class="post-tags">
     {% for tag in post.tags %}
       <a href="{{ url_for(tag.path) }}" rel="tag"><i class="fa fa-tag"></i> {{ tag.name }}</a>
     {% endfor %}
   </div>

14. 在每篇文章末尾统一添加“本文结束”标记

在路径\themes\next\layout\_macro 中新建passage-end-tag.swig 文件,并添加以下内容

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开\themes\next\layout\_macro\post.swig文件，在post-body之后， post-footer 之前添加代码

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件_config.yml,在末尾添加

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

15. 添加底部分享

在主题的配置文件中,将jiathis改为true即可

1
2
3
4
5
6
# Share
# This plugin is more useful in China, make sure you known how to use it.
# And you can find the use guide at official webiste: http://www.jiathis.com/.
# Warning: JiaThis does not support https.
jiathis: true
  ##uid: Get this uid from http://www.jiathis.com/

16. 修改代码块自定义样式

打开\themes\next\source\css\_custom\custom.styl,向里面加入如下css样式，即可实现

1
2
3
4
5
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}

17. 添加友情链接

在主题配置文件(blog\themes\next_config.yml)中打开links 开关即可

1
2
3
4
5
6
7
8
# Blog rolls
links_icon: link
links_title: 友情链接
#links_layout: block
links_layout: inline
links:
  #Title: http://example.com/
  JayLee: http://xxxx.cn/

注意：添加友情链接后 运行hexo g命令报错。
此时，只要将其中一个links_layout属性注掉就可以。

links_layout: inline 对应的水平布局，否则友情链接是竖直一列排列

18. 博客添加背景动态效果和心心

因为动态背景效果在手机上体验不太好，所以自己只加了小心心的效果。当鼠标左键点击的时候会出现不同颜色的小心心。

下载js文件love.js

1
http://7u2ss1.com1.z0.glb.clouddn.com/love.js

把 js 文件 love.js放在\themes\next\source\js\src文件目录下

更新\themes\next\layout_layout.swig文件，在末尾（在前面引用会出现找不到的bug）添加以下js引入代码：

1
2
<!-- 页面点击小红心 -->
<script type="text/javascript" src="/js/src/love.js"></script>

19. hexo文章目录显示的bug

参考博客：hexo-next为啥文章预览那里我的文章跳转只能点击前面的数字 #2035

将主题配置文件中的number属性修改为false即可取消自动编号。

1
2
# Automatically add list number to toc.
number: false

bug描述： hexo会自动为文章生成一个目录，并且会自动编号。
这个功能可以在主题配置文件中开启，但是编号以后只点击编号才能跳转到对应位置，点击文字却没有反应。

这是hexo 3.4.3的一个bug，只有点击文章目录的编号才能跳转。更新hexo到3.4.4即可解决此bug。

进入到博客的根目录中，执行命令：

1
npm update hexo

然后执行hexo version查看hexo的版本号，更新完成即可解决此bug。

20. 更换Scheme

NexT主题默认有四种主题外观，Scheme的切换可以通过更改 主题配置文件 。搜索 scheme 关键字,就会看到有四行 scheme 的配置，将需要启用的scheme前面的注释#去除即可。

注意事项
但是 scheme 前边一定不要留空格，:必须是英文的，而且后边必须留空格。
错误的配置（:后没有空格）
错误配置（scheme前边留了空格）

如果scheme前边留了空格，执行hexo g命令，或者启动博客服务时，会报出如下错误

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Unhandled rejection Error: ENOENT: no such file or directory, open 'C:\github\blog\themes\next\layout\_scripts\schemes\.swig'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at Object.ret.load (C:\github\blog\node_modules\swig\lib\loaders\filesystem.js:55:15)
    at compileFile (C:\github\blog\node_modules\swig\lib\swig.js:695:31)
    at Object.eval [as tpl] (eval at <anonymous> (C:\github\blog\node_modules\swig\lib\swig.js:498:13), <anonymous>:293:18)
    at compiled [as _compiledSync] (C:\github\blog\node_modules\swig\lib\swig.js:619:18)
    at tryCatcher (C:\github\blog\node_modules\bluebird\js\release\util.js:16:23)
    at null._compiled (C:\github\blog\node_modules\bluebird\js\release\method.js:15:34)
    at View.render (C:\github\blog\node_modules\hexo\lib\theme\view.js:29:15)
    at C:\github\blog\node_modules\hexo\lib\hexo\index.js:387:25
    at tryCatcher (C:\github\blog\node_modules\bluebird\js\release\util.js:16:23)
    at C:\github\blog\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (C:\github\blog\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:336:10)
    at resume_ (_stream_readable.js:726:12)
    at _combinedTickCallback (node.js:383:13)
    at process._tickCallback (node.js:407:11)

21. 优化加载速度

为了提高网站的加载速度，使用gulp对博文中的js、css、img等文件进行压缩。
在博客的根目录执行以下命令

1
2
$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

然后在根目录中新建文件gulpfile.js，并填入以下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
])

生成博文是执行hexo g && gulp就会根据gulpfile.js中的配置，对public目录中的静态资源文件进行压缩。

22. 博文置顶

打开博客的根目录，将文件node_modules/hexo-generator-index/lib/generator.js中的代码替换为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.top && b.top) { // 两篇文章top都有定义
            if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
            else return b.top - a.top; // 否则按照top值降序排
        }
        else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.top && b.top) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后写文章的时候，添加 top字段即可，数值越大文章越靠前。例如

1
2
3
4
5
6
7
8
title: 
tags: 
categories: 
photos:
date: 2019-06-30 17:27:39
updated:
copyright: true
top: 100

注意：必须重启本地服务才会生效。

23. 博客置顶功能

参考博客新增Hexo博客文章置顶功能

修改node_modules/hexo-generator-index/lib/generator.js的源码， 添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

修改后的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

  var paginationDir = config.pagination_dir || 'page';
  var path = config.index_generator.path || '';

相关链接：

Next官方手册
CSS颜色代码大全视图参照表！
fontawesome图标大全
西蒙的博客
ShaoYanCe的博客

-------------本文结束 谢谢阅读-------------
-------------若有错误欢迎评论-------------
2块钱请我吃根热狗吧,啾咪.⁄( ⁄•⁄ω⁄•⁄ )⁄.